<!-- 快捷方式 -->
<template>
  <vue-draggable
    tag="el-row"
    v-model="data"
    :component-data="{ props: { gutter: 15 } }"
    :animation="300"
    :set-data="() => void 0"
    @end="onEnd"
  >
    <el-col :lg="6" :md="6" :sm="6" :xs="12">
      <el-card shadow="hover" body-style="padding: 0px 10px;">
        <router-link to="/accountLog" class="app-link-block">
          <div class="card_box">
            <div class="card_box_cir">
              <img class="card_icon" src="@/assets/icon/account-b.png" alt="">
            </div>
            <div class="card_box_txt">
              <span class="sp1">我的余额</span>
              <span class="sp2"><span class="sp3">{{defaultData.balance}}</span></span>
            </div>
          </div>
        </router-link>
      </el-card>
    </el-col>
    <el-col :lg="6" :md="6" :sm="6" :xs="12">
      <el-card shadow="hover" body-style="padding: 0px 10px;">
        <router-link to="/accountLog" class="app-link-block">
          <div class="card_box">
            <div class="card_box_cir">
              <img class="card_icon" src="@/assets/icon/account-a.png" alt="">
            </div>
            <div class="card_box_txt">
              <span class="sp1">形象克隆</span>
              <span class="sp2"><span class="sp3">{{defaultData.avatarCountUsed}}</span> / {{defaultData.avatarCount}}  {{defaultData.type == 1 ? '(次)':'(点)'}}</span>
            </div>
          </div>
        </router-link>
      </el-card>
    </el-col>
    <el-col :lg="6" :md="6" :sm="6" :xs="12">
      <el-card shadow="hover" body-style="padding: 0px 10px;">
        <router-link to="/accountLog" class="app-link-block">
          <div class="card_box">
            <div class="card_box_cir">
              <img class="card_icon" src="@/assets/icon/account-s.png" alt="">
            </div>
            <div class="card_box_txt">
              <span class="sp1">声音克隆</span>
              <span class="sp2"><span class="sp3">{{defaultData.voiceCountUsed}}</span> / {{defaultData.voiceCount}}  {{defaultData.type == 1 ? '(次)':'(点)'}}</span>
            </div>
          </div>
        </router-link>
      </el-card>
    </el-col>
    <el-col :lg="6" :md="6" :sm="6" :xs="12">
      <el-card shadow="hover" body-style="padding: 0px 10px;">
        <router-link to="/accountLog" class="app-link-block">
          <div class="card_box">
            <div class="card_box_cir">
              <img class="card_icon" src="@/assets/icon/account-v.png" alt="">
            </div>
            <div class="card_box_txt">
              <span class="sp1">视频剪辑</span>
              <span class="sp2"><span class="sp3">{{defaultData.videoCountUsed}}</span> / {{defaultData.videoCount}}  (秒)</span>
            </div>
          </div>
        </router-link>
      </el-card>
    </el-col>
  </vue-draggable>
</template>

<script>
  import VueDraggable from 'vuedraggable';
  import { getAccountLinkData } from '@/api/dashboard/analysis';

  export default {
    name: 'LinkCard',
    components: { VueDraggable },
    data() {
      return {
        data:[],
        defaultData:{},
      };
    },
    created() {
      this.getData();
    },
    methods: {
      getData(){
        getAccountLinkData().then((rtn) => {
          if(rtn != null){
            this.defaultData = rtn
          }
        }).catch((e) => {
          this.$message.error(e.message);
        });
      },
      /* 排序改变 */
      onEnd() {
        this.cacheData();
      },
      /* 重置布局 */
      reset() {
        this.defaultData = [...this.defaultData];
        this.cacheData();
      },
      /* 缓存布局 */
      cacheData() {
        localStorage.setItem('workplace-links', JSON.stringify(this.defaultData));
      }
    }
  };
</script>

<style scoped>
  .app-link-block {
    display: block;
    color: inherit;
    padding: 15px 0;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
  }

  .app-link-block .app-link-icon {
    color: #69c0ff;
    font-size: 30px;
    margin-top: 5px;
  }

  .app-link-block .app-link-title {
    margin-top: 8px;
  }
  .card_box_cir1 .iconfont {
      font-size: 26px;
      color: #fff;
  }

  .card_icon{
    width: 52px;
    height: 52px;
  }

  .card_box {
      width: 100%;
      height: 100%;
      display: flex;
      -webkit-box-align: center;
      align-items: center;
      box-sizing: border-box;
      border-radius: 4px;
  }
  .card_box .card_box_cir {
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
  }



   .card_box .card_box_cir {
    
    border-radius: 50%;
    display: flex;
    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
  }

  
  .card_box .card_box_cir {
    width: 45px;
    height: 45px;
    overflow: hidden;
    margin-right: 20px;
  }

  .card_box .card_box_txt .sp1 {
    display: block;
    color: #252631;
    font-size: 16px;
    margin-bottom: 5px;
  }

  .card_box .card_box_txt .sp2 {
    display: block;
    color: #98a9bc;
    font-size: 14px;
  }

  .card_box .card_box_txt .sp3 {
    color:#1890FF;
    font-size: 20px;
  }
 
</style>
